// 将此文件内容复制到App.js，运行npm start即可查看效果。
import React, { useCallback } from 'react';
import {
  ReactFlow,
  useNodesState,
  useEdgesState,
  addEdge,
} from 'reactflow';
import 'reactflow/dist/style.css';
import './App.css';


const defaultNode = {
  id: 'default - node - 1',
  type: 'default',
  data: { label: 'Default Node' },
  position: { x: 100, y: 100 }
};

const inputNode = {
  id: 'input - node - 1',
  type: 'input',
  data: { label: 'Input Node' },
  position: { x: 300, y: 100 }
};

const outputNode = {
  id: 'output - node - 1',
  type: 'output',
  data: { label: 'Output Node' },
  position: { x: 500, y: 100 }
};

const decisionNode = {
  id: 'decision - node - 1',
  type: 'decision',
  data: { label: 'Decision Node' },
  position: { x: 700, y: 100 }
};

const initialNodes = [
  inputNode,
  outputNode,
  defaultNode,
  decisionNode

];

const initialEdges = [];
// const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];

export default function App() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
  
  const onConnect = useCallback(
    (params) => setEdges((eds) => addEdge(params, eds)),
    [setEdges],
  );
  return (
    <div style={{ height: '500px' }}>
      <ReactFlow 
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
      fitView/>
    </div>
  );
}